@page "/scheduler/tooltip-template"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.Buttons
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper

@inherits SampleBaseComponent;

<SampleDescription>
 <p> This demo illustrates how to enable tooltip on Scheduler events as well as the way to customize it. The tooltip can be customized to display any of the information in a formatted style by using the tooltip template option. </p>   
</SampleDescription>
<ActionDescription>
   <p>In this demo, the tooltip is enabled to display on events by setting true to <code>EnableTooltip</code> option within the <code>EventSettings</code> property. After enabling the default tooltip, it is customized to display the needed event information along with
    the appropriate images by using the <code>TooltipTemplate</code> option within the <code>EventSettings</code>. </p>
   <p>The <code>TooltipTemplate</code> option will not work, if <code>EnableTooltip</code> is set to false. In mobile devices, tap holding the events will open the tooltip. </p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="content-wrapper">
        <SfSchedule TValue="ScheduleData.EventsData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleEventSettings TValue="ScheduleData.EventsData" DataSource="@DataSource" EnableTooltip="@EnableTooltip">
                <TooltipTemplate>
                    @{
                        var eventData = (context as ScheduleData.EventsData);
                        <div class="tooltip-wrap">
                            <div class="image @eventData.EventType"></div>
                            <div class="content-area">
                                <div class="name">@eventData.Subject</div>
                                @if (@eventData.City != null)
                                {<div class="city">@eventData.City</div>}
                                <div class="time">From&nbsp;:&nbsp;@eventData.StartTime</div>
                                <div class="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;@eventData.EndTime</div>
                            </div>
                        </div>
                    }
                </TooltipTemplate>
            </ScheduleEventSettings>
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
                <ScheduleView Option="View.Month"></ScheduleView>
                <ScheduleView Option="View.Agenda"></ScheduleView>
            </ScheduleViews>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-header">Properties</div>
    <div class="property-panel-content">
        <table id='property' title='Properties' class='property-panel-table' style="width: 100%;">
            <tbody>
                <tr style="height: 50%">
                    <td style="width: 100%">
                        <SfCheckBox @bind-Checked="@EnableTooltip" Label="Enable Tooltip"></SfCheckBox>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

@code{
    public DateTime CurrentDate = new DateTime(2020, 1, 16);
    List<ScheduleData.EventsData> DataSource = new ScheduleData().GetEventsData();
    public bool EnableTooltip = true;
}
<style>
        .e-schedule-event-tooltip .tooltip-wrap {
            display: flex;
        }

        .e-schedule-event-tooltip .tooltip-wrap .image {
            background-image: url('@UriHelper.ToAbsoluteUri($"images/scheduler/public-event.png")');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 50px;
            height: 50px;
        }

        .e-schedule-event-tooltip .tooltip-wrap .content-area {
            padding-left: 6px;
            font-size: 12px;
        }

        .e-schedule-event-tooltip .tooltip-wrap .maintenance {
            background-image: url('@UriHelper.ToAbsoluteUri($"images/scheduler/public-event.png")');
        }

        .fabric .e-schedule-event-tooltip .tooltip-wrap .maintenance,
        .highcontrast .e-schedule-event-tooltip .tooltip-wrap .maintenance {
            background-image: url('@UriHelper.ToAbsoluteUri($"images/scheduler/maintenance1.png")');
        }

        .e-schedule-event-tooltip .tooltip-wrap .public-event {
            background-image: url('@UriHelper.ToAbsoluteUri($"images/scheduler/maintenance.png")');
        }

        .fabric .e-schedule-event-tooltip .tooltip-wrap .public-event,
        .highcontrast .e-schedule-event-tooltip .tooltip-wrap .public-event {
            background-image: url('@UriHelper.ToAbsoluteUri($"images/scheduler/public-event1.png")');
        }

        .e-schedule-event-tooltip .tooltip-wrap .family-event {
            background-image: url('@UriHelper.ToAbsoluteUri($"images/scheduler/family-event.png")');
        }

        .fabric .e-schedule-event-tooltip .tooltip-wrap .family-event,
        .highcontrast .e-schedule-event-tooltip .tooltip-wrap .family-event {
            background-image: url('@UriHelper.ToAbsoluteUri($"images/scheduler/family-event1.png")');
        }

        .e-schedule-event-tooltip .tooltip-wrap .commercial-event {
            background-image: url('@UriHelper.ToAbsoluteUri($"images/scheduler/commercial-event.png")');
        }

        .fabric .e-schedule-event-tooltip .tooltip-wrap .commercial-event,
        .highcontrast .e-schedule-event-tooltip .tooltip-wrap .commercial-event {
            background-image: url('@UriHelper.ToAbsoluteUri($"images/scheduler/commercial-event1.png")');
        }

        .e-schedule-event-tooltip .tooltip-wrap .name {
            font-weight: 500;
            font-size: 14px;
        }
</style>